<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
    <style type="text/css">
        #customers
        {
            font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
            width:50%;
            border-collapse:collapse;
        }

        #customers td, #customers th
        {
            font-size:1em;
            border:1px solid #98bf21;
            padding:3px 7px 2px 7px;
        }

        #customers th
        {
            font-size:1.1em;
            text-align:left;
            padding-top:5px;
            padding-bottom:4px;
            background-color:#A7C942;
            color:#ffffff;
        }

        #customers tr.alt td
        {
            color:#000000;
            background-color:#EAF2D3;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-if="list.length">
        <table id="customers">
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in list">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price | showPrice}}</td>
                <td><button @click="subClick(index)" :disabled="item.count <= 1">-</button>{{item.count}}<button @click="addClick(index)">+</button></td>
                <td><button @click="delClick(index)">移除</button></td>
            </tr>
        </table>
        <h1>总价:{{totalPrice | showPrice}}</h1>
    </div>
    <h1 v-else>购物车为空</h1>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            list:[
                {id:1,name:'毛衣',price:80,count:1},
                {id:2,name:'衬衫',price:85,count:1},
                {id:3,name:'裤子',price:89,count:1},
                {id:4,name:'外套',price:86,count:1},
                {id:5,name:'鞋子',price:87,count:1}
            ]
        },
        methods:{
            subClick(index){
                this.list[index].count--
            },
            addClick(index){
                this.list[index].count++
            },
            delClick(index){
                this.list.splice(index,1)
            }
        },
        computed:{
            totalPrice(){
                let totalPrice=0
                // for (let i=0;i<this.list.length;i++){
                //     totalPrice+=this.list[i].price*this.list[i].count
                // }
                // for (let i in this.list){
                //     totalPrice+=this.list[i].price*this.list[i].count
                // }
                for (let item of this.list){
                    totalPrice+=item.price*item.count
                }
                return totalPrice
            }
        },
        filters:{
            showPrice(price){
                return '￥'+price.toFixed(2)
            }
        }
    })
</script>
</body>
</html>
